<template>
    <!-- 考勤周期界面 -->
    <div style="padding: 10px;">
        <el-row :gutter="24">
            <el-col :span="2">
                <div class="grid-content ep-bg-purple"><el-button type="primary" size="default"
                        style="width: 100px;" @click="add">添加</el-button>

                </div>
            </el-col>

            <el-col :span="2">
                <div class="grid-content ep-bg-purple">
                </div>
            </el-col>

            <el-col :span="12">
                <div class="grid-content ep-bg-purple">
                </div>
            </el-col>

            <el-col :span="4">
                <div class="grid-content ep-bg-purple-light">
                    <!-- 将搜索输入框与 searchKeyword 响应式变量进行双向绑定 -->
                    <el-input style="width: 180px" size="default" placeholder="搜索数据" v-model="attendanceCycle"
                        @blur="loadCycles" @keyup.enter="loadCycles">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
            </el-col>

            <!-- <el-col :span="1">
                <div class="grid-content ep-bg-purple-light">
                    <a-tooltip content="筛选" position="bottom" background-color="rgb(52, 145, 250)" mini>
                        <el-button size="default" @click="dialog = true"><el-icon>
                                <Filter />
                            </el-icon></el-button>
                    </a-tooltip>
                </div>
            </el-col>

            <el-col :span="1">
                <div class="grid-content ep-bg-purple-light"> <a-tooltip content="排序" position="bottom"
                        background-color="rgb(52, 145, 250)" mini>
                        <el-button size="default" @click=""><el-icon>
                                <Sort />
                            </el-icon></el-button>
                    </a-tooltip>
                </div>
            </el-col> -->


            <el-col :span="2">
                <div class="grid-content ep-bg-purple-light"><a-tooltip content="刷新" position="bottom"
                        background-color="rgb(52, 145, 250)" mini>
                        <el-button size="default" @click="refresh"><el-icon>
                                <Refresh />
                            </el-icon></el-button>
                    </a-tooltip>
                </div>
            </el-col>
            <!--  -->
        </el-row>

        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="page.records" style="height: 800px;" scrollbar-always-on @row-click="handleRowClick">
                    <el-table-column v-for="col in cycle_columns" :prop="col.id" :label="col.label" :width="col.width">
                    </el-table-column>
                </el-table>

                <el-pagination @current-change="loadCycles" v-model:currentPage="page.current"
                    :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                </el-pagination>
            </el-col>
        </el-row>
    </div>

    <!--筛选  -->
    <el-drawer v-model="dialog" title="筛选" direction="rtl" class="demo-drawer">
        <div class="demo-drawer__content">
            <el-form :model="form" style="height: 600px;">
                <el-select v-model="Screening" placeholder="筛选" style="width: 360px" placement="bottom">
                    <template #label="{ label, value }">
                        <span style="font-weight: bold">{{ label }}</span>
                    </template>
                    <el-option v-for="item in FilterData" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" :loading="loading" @click="onClick">
                    {{ loading ? '提交中 ...' : '提交' }}
                </el-button>
            </div>
        </div>
    </el-drawer>

    <!--添加  -->
    <!-- <el-dialog title="考勤周期" v-model="AddDisplay" width="780px">
        <attendanceCycle></attendanceCycle>
    </el-dialog> -->

    <!-- 详情页面 -->
    <!-- <el-dialog :title="selectedRow.name + '-' + selectedRow.department" v-model="dialogVisible" width="780px">
        <attendanceCycleDetails :cycleDetail="selectedRow"></attendanceCycleDetails>
    </el-dialog> -->

    <el-dialog align-center :destroy-on-close="true" :title="title" v-model="AddDisplay" width="780px">
        <router-view @ref-table="refTable" :data="selectedRow"></router-view>
    </el-dialog>

</template>

<script lang="ts" setup>
import { ref } from 'vue';  // 引入 computed 用于创建计算属性
import request from '@/api/request';
import router from "@/router";

const isVisible = ref(false) // 详情显示
const loading = ref(false) //抽屉加载
const dialog = ref(false); //抽屉

// 添加搜索关键词响应式变量，用于存储用户输入的搜索内容
const attendanceCycle = ref('')

const dialogVisible = ref(false)
const selectedRow = ref({})

// columns : 表头
const cycle_columns = ref([
    { id: 'attendanceCycle', label: '考勤周期', width: '200' },
    { id: 'startDate', label: '考勤周期开始时间', width: '200' },
    { id: 'endDate', label: '考勤周期结束时间', width: '200' },
    { id: 'totalDays', label: '总共天数', width: '200' },
    { id: 'workingDays', label: '工作日数', width: '200' },
    { id: 'restDays', label: '休息天数', width: '200' },
    { id: 'submitAt', label: '提交时间', width: '200' },
    { id: 'updatedAt', label: '更新时间', width: '200' },
    { id: 'empId', label: '提交人', width: '200' },
])

// 数据
let page = ref({
    current: 1,
    size: 4,
    total: 0,
    records: []
})

//刷新
const refresh = () => {
    request({
        url: "/attendanceCycle/page",
        method: "get",
        params: {
            current: 1,
            size: page.value.size,
            attendanceCycle: ''
        }
    }).then(resp => {
        page.value = resp.data
        attendanceCycle.value = ''
    })
}

//加载表数据
let loadCycles = () => {
    request({
        url: "/attendanceCycle/page",
        method: "get",
        params: {
            current: page.value.current,
            size: page.value.size,
            attendanceCycle: attendanceCycle.value
        }
    }).then(resp => {
        page.value = resp.data
        console.log(page)
    })
}

loadCycles()

// 将搜索关键词转换为小写以实现不区分大小写的搜索
// const keyword = searchKeyword.value.toLowerCase()

const form = ref();
const Screening = ref('') //筛选
const FilterData = ref([ //筛选数据
    { value: '全部', label: '全部' },
    { value: '待面试', label: '待面试' },
    { value: '待入职', label: '待入职' },
])

const onClick = () => {//抽屉提交
    loading.value = true
    setTimeout(() => {
        loading.value = false
        dialog.value = false
    }, 400)
}

//抽屉提交取消
const cancelForm = () => {
    loading.value = false
    dialog.value = false
}

// 获取当前数据
const handleClick = (row) => {
    console.log(row)
    isVisible.value = true
}

const AddDisplay = ref(false) // 添加显示
const title = ref('')

const Initiate = () => { //发起面试关闭
    AddDisplay.value = false
}

const add = () => { //添加
    AddDisplay.value = true
    title.value = '考勤周期';
    router.push("/attendance/basicSetting/attendanceCycle/attendanceCycleInsert");
}

const handleRowClick = (row) => {
    AddDisplay.value = true
    selectedRow.value = row;
    title.value = selectedRow.value.attendanceCycle;
    router.push("/attendance/basicSetting/attendanceCycle/attendanceCycleUpdate")
}

let refTable = () => {
    AddDisplay.value = false;
    loadCycles();
}

</script>

<style scoped></style>